<a href="#/layui/fenhuiMemList" class="layui-btn layui-btn-xs layui-btn-primary" style="margin: 20px 0 20px 30px;">
  <i class="layui-icon">&#xe65c;</i>
</a>

<h2 class="title">变更会员等级</h2>
<div class="layui-card-body">
          <div class="layui-card-header">
            <!-- <span>所有会员列表</span> -->
            <a href="#/member/all/edit" class="layui-btn layui-btn-xs">
              <i class="layui-icon">&#xe654;</i>
              <span>变更等级积分</span>
            </a>
            <a href="javascript:;" class="layui-btn layui-btn-xs layui-btn-primary" id="search_hash">
              <i class="layui-icon">&#xe615;</i>
            </a>
          </div>
          <div class="layui-card-body">
            <table id="demo_hash" lay-filter="test"></table>
            <script type="text/html" id="barDemo_hash">
              <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
              <!-- <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a> -->
              <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
            </script>
          </div>
        </div>
      
      
      
      
      </div>
    </div>
  </div>
</div>

<script type="text/html" id="search_tpl_hash">
  <form class="layui-form" action="">
    
    
    <div class="layui-form-item">
      <label class="layui-form-label">变更日期</label>
      <div class="layui-input-block">
        <div class="date clearfix">
			<div class="layui-date fl"> 
				  <input type="text" class="layui-input from" id="from">
				</div>
				<div class="fl spt">-</div>
				<div class="layui-date fl"> 
				  <input type="text" class="layui-input to" id="toDate">
				</div>
		</div>
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">变更类型</label>
      <div class="layui-input-block">
        <select name="city">
          <option value="0">全部</option>
          <option value="1">后台提取</option>
          <option value="2">后台充值</option>
        </select>
      </div>
    </div>
    
    
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit lay-filter="formDemo_hash"><i class="layui-icon">&#xe615;</i> 搜索</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
      </div>
    </div>
  </form>
</script>

<script>
  layui.config({
    base: '/src/js/'
  }).use(['jquery', 'mockjs', 'table', 'sidebar', 'form'], function () {
    var $ = layui.jquery,
      layer = layui.layer,
      table = layui.table,
      sidebar = layui.sidebar,
      form = layui.form;
    // 注入mock
    layui.mockjs.inject({
      'POST /demo/table/user': {
        code: 0,
        msg: "xxx",
        count: 1000,
        'data|20': [{
          'id|+1': 1,
          username: '@name',
          sex: '@boolean',
          city: '@city',
          sign: '@csentence',
          experience: '@integer',
          score: '@integer',
          classify: '@word',
          wealth: '@integer',
          auth: '@boolean'
        }]
      }
    });
    //第一个实例
    table.render({
      method: 'post',
      // size: 'sm',
      limit: 20,
      elem: '#demo_hash',
      height: '312',
      url: '/demo/table/user', //数据接口
      page: true, //开启分页
      cols: [
        [ //表头
           {
            field: 'username',
            title: '变更日期',
//          width: 200
          }, {
            field: 'sex',
            title: '变更类型',
//          width: 200,
            sort: true
          }, {
            field: 'city',
            title: '当前等级',
//          width: 200
          }, {
            field: 'sign',
            title: '变更等级',
//          width: 177
          }, {
            field: 'experience',
            title: '操作人',
//          width: 200,
            sort: true
          }, {
            field: 'score',
            title: '备注',
//          width: 200,
            sort: true
          },{
            fixed: 'right',
//          width: 180,
            align: 'center',
            toolbar: '#barDemo_hash'
          }
        ]
      ]
    });

    $('#search_hash').on('click', function () {
      var that = this;
      // console.log($('#search_tpl_hash').html());
      sidebar.render({
        elem: that,
        content: $('#search_tpl_hash').html(),
        title: '搜索',
        shade: true,
        // shadeClose:false,
        // direction: 'left'
        // dynamicRender: false,
        // url: 'views/member/all/search.html',
        width: '500px', //可以设置百分比和px
        done: function () {
          console.log('ccc');
          form.render();

          //监听提交
          form.on('submit(formDemo_hash)', function (data) {
            // layer.msg(JSON.stringify(data.field));
            table.reload('demo_hash', {
              where: data.field
            });
            return false;
          });
          layui.use('laydate', function(){
					  var laydate = layui.laydate;
					  var laydate2 = layui.laydate;
					  
					  //执行一个laydate实例
					  laydate.render({
					    elem: '#from' //指定元素
					  });
					  laydate2.render({
					    elem: '#toDate' //指定元素
					  });
					});
        }
      });
    });
  });
</script>


<div class="layui-container">
	<div class="layui-row">
		<form action="" class="layui-form">
    <div class="layui-col-md10">
      
	      
	      <div class="layui-col-md10 userInfo">
	      	<table class="layui-table	" lay-size="lg">
	      		<tbody>
	      			<tr>
	      				<th>会员ID：</th>
	      				<th>12553</th>
	      			</tr>
	      			<tr>
	      				<th>会员名称：</th>
	      				<th></th>
	      			</tr>
	      			<tr>
	      				<th>当前分：</th>
	      				<th>广州给予者商圈</th>
	      			</tr>
	      			<tr>
	      				<th>变更会员：</th>
	      				<th>
	      					
	      						 
	      					
	      					<table  class="layui-table" lay-skin="nob">
	      						<tbody>
	      							<tr>
	      								<td>
	      									<select name="changePer" lay-verify="">
											  <option value="0">会长</option>
											  <option value="1">副会长</option>
											</select>   
	      								</td>
	      								<td><input type="text" name="money" required class="layui-input money" ><span class="moneyWarn">*</span></td>
	      								
	      							</tr>
	      						</tbody>
	      					</table>
	      					
	      				</th>
	      			</tr>
	      			<tr>
	      				<th>备注：</th>
	      				<th><textarea name="else" placeholder="请输入" class="layui-textarea" style="resize:none;"></textarea></th>
	      			</tr>
	      		</tbody>
	      	</table>
	      	<div class="userInfoBtns">
	      		<button class="comfirm layui-btn layui-btn-primary">确定</button>
	      		<button class="back layui-btn">返回列表</button>
	      	</div>
	      	
	      </div>
		
		
	      
      	</form>
      
      
      
      <style scoped>
      	.spt {
			line-height: 35px;
		}
		.clearfix::after {
			content: "";
			clear: both;
			width: 100%;
			height: 0;
			display: block;
		}
		
		.layui-date>input {
			width: 100px;
			margin: 0 10px;
		}
		
		.fl {
			float: left;
		}
      	.title{
      		margin-left: 30px;
      		margin-top: 30px;
      	}
      	.save-warp{
      		width: 100%;
      		text-align: center;
      		margin-top: 20px;
      	}
      	.save-warp button{
      		display: inline-block;
      		width: 160px;
      	}
      	.changeLev-top{
      		display: flex;
      		width: 100%;
      		justify-content: space-between;
      		margin-top: 10px;
      		margin-bottom: 10px;
      	}
      	.changeSe{
      		width: 200px;
      		height: 50px;
      	}
      	.changeLevTable{
      		margin-top: 10px;
      	}
      	.moneyWarn{
      		color: red;
      	}
      	.money{
      		display: inline-block;
      		width: 200px;
      		margin-right: 20px;
      	}
      	.userInfo{
      		margin-top: 20px;
      	}
      	.userInfoBtns{
      		display: flex;
      		justify-content: center;
      	}
      	.userInfoBtns button{
      		width: 200px;
      		margin-top: 20px;
      		margin-bottom: 20px;
      	}
      	
      	
      	
      </style>
      
      
      
      
    </div>
  </div>
</div>